﻿<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"
      name="viewport"
    />
    <title>表白</title>
  </head>

  <script src="js/lib/jquery.min.js" type="text/javascript"></script>
  <script src="js/lib/jquery.fireworks.js" type="text/javascript"></script>

  <style type="text/css">
    * {
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
    }
    html {
      width: 100%;
      height: 100%;
    }
    body {
      max-width: 600px;
      margin: 0 auto;
      background: #0b3443;
      color: #f0f0f0;
    }
    .share_img {
      width: 0;
      height: 0;
      overflow: hidden;
      opacity: 0;
    }
    .content {
      padding: 80px 20px;
    }
    .text_wrapper {
      display: -webkit-box;
      display: flex;
    }
    .text_wrapper .text {
      padding-top: 20px;
      padding-left: 20px;
    }
    .hide {
      display: none !important;
    }
    p {
      margin: 0;
    }
    .btn-groups {
      padding-right: 20px;
      text-align: center;
    }
    .heart-btn {
      display: inline-block;
      animation: breath 0.8s linear 0s infinite both;
      -webkit-animation: breath 0.8s linear 0s infinite both;
    }
    .btn {
      position: relative;
      display: inline-block;
      width: 60px;
      height: 60px;
      margin: 0 30px;
      transform: rotate(45deg);
      -webkit-transform: rotate(45deg);
    }
    .btn span {
      display: block;
      width: 100%;
      height: 100%;
      line-height: 60px;
      margin-top: -10px;
      margin-left: -10px;
      text-align: center;
      transform: rotate(-45deg);
      -webkit-transform: rotate(-45deg);
    }
    .btn-a {
      background: #d26ae5;
    }
    .btn-b {
      background: #c9c9c9;
    }
    .btn-a:before {
      content: "";
      position: absolute;
      display: block;
      width: 30px;
      height: 60px;
      background: #d26ae5;
      left: -29px;
      top: 0;
      border-top-left-radius: 60px;
      border-bottom-left-radius: 60px;
    }
    .btn-a:after {
      content: "";
      position: absolute;
      display: block;
      width: 60px;
      height: 30px;
      background: #d26ae5;
      left: 0;
      top: -29px;
      border-top-left-radius: 60px;
      border-top-right-radius: 60px;
    }
    .btn-b:before {
      content: "";
      position: absolute;
      display: block;
      width: 30px;
      height: 60px;
      background: #c9c9c9;
      left: -29px;
      top: 0;
      border-top-left-radius: 60px;
      border-bottom-left-radius: 60px;
    }
    .btn-b:after {
      content: "";
      position: absolute;
      display: block;
      width: 60px;
      height: 30px;
      background: #c9c9c9;
      left: 0;
      top: -29px;
      border-top-left-radius: 60px;
      border-top-right-radius: 60px;
    }
    .container .mask {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.3);
    }
    .container .modal {
      width: 80%;
      height: 160px;
      position: absolute;
      top: 50%;
      left: 50%;
      background-color: #fff;
      padding: 20px 15px;
      border-radius: 5px;
      transform: translate(-50%, -70%);
    }
    .container .modal p {
      margin-top: 20px;
      margin-bottom: 20px;
      font-size: 16px;
      color: #353535;
      text-align: center;
    }
    .confirm {
      display: block;
      width: 120px;
      height: 40px;
      margin: 0 auto;
      border: none;
      font-size: 16px;
      border-radius: 5px;
      color: #ffffff;
      background: #f45cae;
    }
    .type_words {
      padding: 12px 20px;
    }
    @keyframes breath {
      0% {
        transform: scale3d(1, 1, 1);
        -webkit-transform: scale3d(1, 1, 1);
        transform-origin: 50% 50%;
      }
      50% {
        transform: scale3d(1.02, 1.02, 1.02);
        -webkit-transform: scale3d(1.02, 1.02, 1.02);
        transform-origin: 50% 50%;
      }
      100% {
        transform: scale3d(1, 1, 1);
        -webkit-transform: scale3d(1, 1, 1);
        transform-origin: 50% 50%;
      }
    }
  </style>

  <script type="text/javascript">
    $(function () {
      $("#yes").click(function (event) {
        modal("我就知道小姐姐您一定会愿意的。(^_^)", function () {
          $(".page_one").addClass("hide")
          $(".page_two").removeClass("hide")
          // typeWrite();
          fireworks()
        })
      })
      $("#no").click(function (event) {
        modal("明人不说暗话！", A)
      })
    })

    function A() {
      modal("我喜欢你！", B)
    }

    function B() {
      modal("我知道你在等我这一句话", C)
    }

    function C() {
      modal("请您不要拒绝我", D)
    }

    function D() {
      modal("拒绝我，不存在的", E)
    }

    function E() {
      modal("这辈子都不可能让你离开我", F)
    }

    function F() {
      modal("跟我走吧", G)
    }

    function G() {
      modal("房产证上写你名", H)
    }

    function H() {
      modal("我会做饭", I)
    }

    function I() {
      modal("爱你。么么哒！", J)
    }

    function J() {
      modal("行，我们去民政局登记吧", function () {
        fireworks()
      })
    }

    function fireworks() {
      $(".page_one").addClass("hide")
      $(".page_two").removeClass("hide")
      $(".page_two").fireworks({
        sound: false,
        opacity: 0.9,
        width: "100%",
        height: "100%",
      })
    }

    function modal(content, callback) {
      var tpl =
        '<div class="container">' +
        '<div class="mask"></div>' +
        '<div class="modal">' +
        "<p>" +
        content +
        "</p>" +
        '<button type="button" id="confirm" class="confirm">确定</button>' +
        "</div>" +
        "</div>"
      $("body").append(tpl)
      $(document).on("click", ".confirm", function () {
        $(".container").remove()
        callback()
      })
    }

    var myWords =
      "有人说，人的一生会遇到2920万人，而两个人相爱的概率只有0.000049。在这茫茫人海中，两个人能相遇就值得感激，能相爱更是一种难得。所以，我很庆幸上天让我遇见了你。我希望有个如你一般的人，能看完我写过的所有状态，读完我所有的日志，看完我从小到大的照片，试着听我喜欢的歌。如果可以，甚至陪我去我喜欢的地方，只想弥补错过你的青春。"
    var x = 0
    var speed = 150
    var current = 0
    function typeWrite() {
      $(".type_words").html(myWords.substring(0, x++) + "_")
      var timer = setTimeout("typeWrite()", speed)
      if (x == myWords.length) {
        x = myWords.length
        clearTimeout(timer)
      }
    }
  </script>
  <script>
    // $(document).ready(function () {
    //   var x = document.getElementById("myAudio")
    //   x.play()
    // })·
  </script>
  <body>
    <div class="share_img"><img src="images/a8b.png" alt="" /></div>
    <embed src="music.mp3" hidden="true" />
    <div class="page_one">
      <div class="content">
        <div class="text_wrapper">
          <img src="images/a8.png" alt="" />
          <div class="text">小姐姐，我好喜欢你，你愿意做我女朋友吗？</div>
        </div>
      </div>
      <div class="btn-groups">
        <div class="heart-btn">
          <div id="yes" class="btn btn-a"><span>愿意</span></div>
        </div>
        <div id="no" class="btn btn-b"><span>不愿意</span></div>
      </div>
    </div>
    <div class="page_two hide">
      <div class="type_words"></div>
    </div>

    <div
      style="
        text-align: center;
        margin: 150px 0;
        font: normal 14px/24px 'MicroSoft YaHei';
      "
    ></div>
  </body>
</html>
